<template>
  <div class="worker-pool-wrapper">
    <div class="table-box">
      <div class="filter-header">
        <SelectFilter @change="changeSelectFilter" />
      </div>
      <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getWorkerVoListApi">
        <template #tableHeader>
          <div class="left-box-wrapper">
            <div class="info-wrapper">
              <el-icon size="small" color="#ccc"><Search /></el-icon>
              <span class="info">约</span>
              <span class="info info-cnt">{{ totalCnt }} </span>
              <span class="info">份简历</span>
            </div>
          </div>
        </template>
        <template #avator="scope">
          <div class="left-box">
            <img :src="getAvatorUrl(scope.row.avator)" alt="用户头像" />
          </div>
        </template>
        <template #name="scope">
          <div class="work-info-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
            <div class="info-item">
              <span class="info-info info-b">{{ getShowName(scope.row.name, scope.row.gender) }}</span>
              <!-- <el-button
                class="ml-2"
                :icon="Edit"
                circle
                size="small"
                @click="handleOpenDialog(OptEnum.EDIT, scope.row)"
              ></el-button> -->
            </div>
            <div class="info-item">
              <span class="info-info info-s">{{ scope.row.cityName || "城市" }} </span>|
              <span class="info-info info-s">{{ filterEnum(scope.row.gender, genderType) }} </span>|
              <span class="info-info info-s">{{ getAge(scope.row.birthDay) }}&nbsp;岁</span>|
              <span class="info-info info-s">{{ scope.row.eduContent || "--" }} </span>|
              <span class="info-info info-s">{{ scope.row.workYearContent || "--" }}</span>
            </div>
          </div>
        </template>
        <template #expJob="scope">
          <div class="expjob-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
            <div class="info-item">
              <span class="info-b">{{ scope.row.expCity }}</span>
            </div>
            <div class="info-item">
              <el-tag v-for="(tag, idx) in getTags(scope.row.expJobTypeNames)" :key="idx">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </template>
        <template #workContent="scope">
          <div class="work-tag-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
            <div class="tag-bar">
              <el-tag v-for="(tag, idx) in getTags(scope.row.stags)" :key="idx">
                {{ tag }}
              </el-tag>
            </div>
            <div class="tag-bar">
              <el-tag v-for="(tag, idx) in getTags(scope.row.ftags)" :key="idx">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </template>
        <template #expSalary="scope">
          <span>{{ scope.row.expSalaryStart }}&nbsp;-&nbsp;</span>
          <span>{{ scope.row.expSalaryEnd }}&nbsp;元&nbsp;</span>
        </template>
        <template #lastLoginDate="scope">
          {{ dateStr(scope.row.lastLoginDate) }}
        </template>
        <template #operation="scope">
          <el-button
            :type="scope.row.flagSee == 'Y' ? 'success' : 'danger'"
            :icon="Download"
            @click="handleOpenDialog(OptEnum.EDIT, scope.row)"
          >
            {{ scope.row.flagSee == "Y" ? "已下载" : "下载工友" }}
          </el-button>
          <el-button type="primary" :disabled="scope.row.flagSee != 'Y'" :icon="ChatDotRound" @click="handleCommunicate(scope.row)"> 直接沟通 </el-button>
        </template>
      </ProTable>
      <WorkerDialog ref="dialogRef" @refresh-list="handleRefreshList" />
      <!-- <ChargeDialog ref="chargeDialogRef" @refresh-info="handleRefreshInfo" /> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, toRef } from "vue";
import SelectFilter from "./components/SearchFilter.vue";
import ProTable from "@/components/ProTable/index.vue";
import { filterEnum } from "@/utils";
import { genderType } from "@/biz/datas/sysData";
import { getAge, dateStr } from "@/utils";
import WorkerDialog from "../components/WorkerDialog.vue";
import { Download, Search, ChatDotRound } from "@element-plus/icons-vue";
import { getWorkerVoListApi } from "@/api/modules/cpyswk/pol";
import { ColumnProps } from "@/components/ProTable/interface";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import defaultAvatar from "@/assets/images/davator.png";
import { getUserDetails } from "@/api/modules/user";

import router from "@/routers/index";

const pTable = ref();
//当前帐号的信息
interface CurAccountOption {
  //弹出表单的标题
  selectFilterValues: any;
}
//当前表单数据在这里初始化
const dialogData = reactive<CurAccountOption>({
  selectFilterValues: []
});
const initParam = reactive({
  filters: toRef(dialogData, "selectFilterValues")
});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  {
    prop: "avator",
    label: "头像",
    width: 80
  },
  {
    prop: "name",
    label: "工友信息"
  },
  {
    prop: "workContent",
    label: "工友标签"
  },
  {
    prop: "expJob",
    label: "期望岗位"
  },
  {
    prop: "expSalary",
    label: "期望薪资",
    width: 120
  },

  {
    prop: "lastLoginDate",
    label: "最近登录",
    width: 100
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];

// const selectFilterValues = ref({});
const changeSelectFilter = (val: any) => {
  dialogData.selectFilterValues = val;
  console.log(dialogData.selectFilterValues);
  handleRefreshList();
};

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

const totalCnt = computed(() => {
  if (pTable.value) {
    return pTable.value.pageable?.total || 0;
  } else {
    return 0;
  }
});

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

const getShowName = (name: string, gender: number) => {
  if (name && name.length > 1) {
    if (gender == sysEnum.ONE) {
      return name.substring(0, 1) + "先生";
    } else if (gender == sysEnum.TWO) {
      return name.substring(0, 1) + "女士";
    }
  }
  return name;
};

const getTags = computed(() => {
  return (tagsStr: string): string[] => {
    let tags: string[] = [];
    if (tagsStr && tagsStr.length) {
      tags = tagsStr.split(",");
    }
    return tags;
  };
});

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

const handleCommunicate = row => {
  router.push({
    path: "/im/index",
    query: {
      userId: row.userId
    }
  });
};
</script>
<style lang="scss" scoped>
.worker-pool-wrapper {
  width: 100%;
  height: 100%;
  background-color: white;

  .filter-header {
    height: 100px;
  }
}

.left-box-wrapper {
  // border: 1px solid red;

  .info-wrapper {
    border: 1px solid var(--el-color-info-light-5);
    width: 160px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;

    .info {
      margin: 0 5px;
      font-size: 0.8rem;
      color: var(--el-color-info);
    }

    .info-cnt {
      font-size: 1.1rem;
      color: var(--el-color-danger);
    }
  }
}

.left-box {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    height: 60px;
    width: 60px;
  }
}

.work-info-wrapper {
  // border: 1px solid red;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;

  flex-direction: column;
}

.info-item {
  display: flex;
  font-size: 0.8em;
  font-weight: 600;
  overflow: hidden;
  & .el-tag {
    margin-right: 0.5rem;
  }

  .info-b {
    font-weight: 600;
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 5px;
  }

  .info-s {
    font-size: 0.8rem;
    color: var(--el-color-info);
  }

  .info-info {
    margin: 0 5px;
  }
}

.work-tag-wrapper {
  // border: 1px solid red;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  flex-direction: column;

  .tag-bar {
    width: 100%;
    margin-bottom: 5px;
    // border: 1px solid red;
    display: flex;
    & .el-tag {
      margin-right: 0.5rem;
    }
  }
}

.ml-2 {
  margin: 0 10px;
  font-size: 0.8rem;
}
.expjob-wrapper {
  width: 100%;
  height: 70px;
}
</style>
